<template>
    <div class="input">
        <input type="text" @keyup.enter="addTodo" placeholder="你接下来要做什么?">
    </div>
</template>

<script setup>
const emit = defineEmits(['addTodo'])
// 添加todo
const addTodo = (event) => {
    // event.target：获取事件发生的目标元素
    let name = event.target.value.trim()
    if (!name) {
        alert('内容不能为空')
        return
    }
    let todo = { id: Date.now(), name, isDone: false }
    // todos.value.unshift(todo) 
    // 子通信父
    emit('addTodo', todo)

    // 清空输入框
    event.target.value = ''
}

</script>

<style lang="scss" scoped>
.input input {
    width: 100%;
    height: 40px;
    border: 1px solid #999;
    outline: none;

}
</style>